<template>
    <u-popup :show="show" mode="center" round="20" :safeAreaInsetBottom="false" @close="handleClose" closeable>
        <view class="realname-modal">
            <text class="title"> 想和TA畅聊？先完成实名认证吧！</text>
            <div class="text-wrapper">
                <text class="desc">✅ 认证通过，立即开启对话！</text>
                <text class="desc">🛡 实名保障双方安全，让相遇更安心。</text>
                <text class="desc">⏱只需1分钟，简单几步即可完成。</text>
            </div>
            <view class="btns">
                <view class="btn secondary" @click="handleClose">暂不认证</view>
                <view class="btn primary" @click="handleConfirm">立即认证</view>
            </view>
        </view>
    </u-popup>
</template>

<script>
export default {
    name: 'RealnameModal',
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    emits: ['update:show', 'close', 'confirm'],
    methods: {
        handleClose() {
            this.$emit('update:show', false)
            this.$emit('close')
        },
        handleConfirm() {
            this.$emit('confirm')
        }
    }
}
</script>

<style scoped>
.realname-modal {
    width: 600rpx;
    padding: 40rpx 32rpx 32rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url('https://hxs.dsjhs.com:553/prod-api/profile/dazhaohu-head.png') no-repeat center center;
    background-size: 100% 100%;
}

.modal-icon {
    width: 92rpx;
    height: 92rpx;
}

.title {
    margin-top: 24rpx;
    font-size: 32rpx;
    color: #34314F;
    font-weight: 600;
}

.text-wrapper {
    margin: 40rpx auto 52rpx;
}

.desc {
    display: block;
    font-size: 26rpx;
    color: #666A7F;
    text-align: center;
    line-height: 1.6;
    text-align: left;
}

.btns {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 20rpx;
}

.btn {
    flex: 1;
    height: 88rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
}

.primary {
    color: #fff;
    font-weight: 600;
    background: linear-gradient(173deg, #FFA5F5 0%, #319EFF 100%);
    border-radius: 20px;
}

.secondary {
    background: rgba(52, 49, 79, 0.06);
    color: #34314F;
    border-radius: 20px;
}
</style>